<template>
  <div class="l-main">
    <div
      ref="subjectRef"
      class="editable"
      @mouseup="handleMouseUp"
      @input="change"
      :contenteditable="true"
    ></div>
    <el-button @click="handelInsert">指定位置插入文本</el-button>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const subjectRef = ref(null);

const range = ref();

const handleMouseUp = () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    range.value = selection.getRangeAt(0);
  }
};

const handelInsert = () => {
  let el = document.createElement("span");
  el.innerText = "我是插入的文本";
  // 删除当前选中的内容
  range.value.deleteContents();
  //将新元素插入到当前光标位置
  range.value.insertNode(el);
};

const change = (val) => {};
onMounted(() => {
  subjectRef.value.innerHTML = "<div>12345678910111213141516171819202122</div>";
});
</script>

<style>
.editable {
  border: 1px solid #ccc;
  padding: 5px;
  min-height: 50px;
  margin-bottom: 10px;
}
</style>

<!-- 
1、 :contenteditable="true" 是div 可编辑的关键

2、 selection.getRangeAt(index)
  (1)selection：是一个 Selection 对象，它表示用户当前的选择。这个对象可以通过 window.getSelection() 方法获取。
  (2)getRangeAt(index)：这是 Selection 对象的一个方法，用于获取选择中的第 index 个范围（range）。范围（range）是文档中的一个连续区域，可以是文本或元素。 
  (3)index：这是一个整数，表示要获取的范围在当前选择中的索引。索引从 0 开始 因为鼠标加上键盘按钮可以不连续的选择多个范围。
-->
